<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .complete {
            color: green;
        }
    </style>
</head>
<body>
<section>
    <h4>css面试题</h4>
    <ol>
        <li>垂直居中</li>
        <li>margin和padding的区别 （作用对象不同）</li>
        <li>vw和百分比的区别 （父级对象不同）</li>
        <li>行内元素和块元素（行内元素的宽高内容决定，不支持margin-top）</li>
        <li>谷歌浏览器如何让字体变小（scale缩放）</li>
    </ol>
</section>
<section>
    <h4>js面试题</h4>
    <ol>
        <li>防抖和节流</li>
        <li>typeof 和 instanceof</li>
    </ol>
    <ol>
        <li>let 与 var （var 声明提升->先上车后买票）</li>
        <li>let 与 var （var 红杏出墙）</li>
        <li>let 与 var （var 声明覆盖）</li>
        <li>基本类型和引用类型</li>
        <li>基本类型和引用类型 （解构赋值->浅拷贝）</li>
        <li>基本类型和引用类型 （JSON.parse(JSON.stringify)）</li>
        <li>基本类型和引用类型 （deepCopy）</li>
        <li>基本类型和引用类型 （hasOwnProperty）</li>
        <li>从浏览器输入url后发生了什么</li>
        <li>图片懒加载</li>
        <li>this指向 （call，apply，bind）</li>
        <li>闭包（方法中返回内容被使用）</li>
        <li>闭包（为什么要闭包：避免污染，保存变量）</li>
        <li>闭包（AO：函数和局部变量都会放在这里，程序执行完就回收了）</li>
        <li>闭包（全局变量不会被回收）</li>
        <li>闭包（防抖、节流）</li>
        <li>new 做了什么，如何实现一个new</li>
        <li>Object.create(null) 和 {} 区别</li>
        <li>事件代理</li>
        <li>架构设计</li>
        <li>vue 各个角色（observe，observer，watcher，dep，reactive）</li>
        <li>vue vue-router vue-link</li>
        <li>vue vuex</li>
        <li>手写promise</li>
        <li>this指向</li>
        <li>var 函数 预解析</li>
        <li>null 和 undefined区别 （null:0 undefined:NaN null和undefined: false）</li>
        <li>symbol (解决属性名重复，属性值会被覆盖问题)</li>
        <li>symbol 实战应用</li>
    </ol>
    <ol>
        <li>
            axios源码
            <ol>
                <li>http</li>
                <li>xhr</li>
                <li>fetch</li>
            </ol>
        </li>
        <li>
            大文件下载
            <ol>
                <li>blob</li>
                <li>range</li>
            </ol>
        </li>
        <li>
            计算首屏时间
            <ol>
                <li>performance</li>
                <li>fcp</li>
                <li>白屏 首屏 mutationObserver</li>
            </ol>
        </li>
        <li>
            webWorker
            <ol>
                <li>错误影响主线程？</li>
                <li>postmessage</li>
            </ol>
        </li>
        <li>
            前端工程化
            <ol>
                <li>解决重复性工作</li>
                <li>nodejs：文件、网络</li>
                <li>npm下载包</li>
                <li>热更新</li>
                <li>图片webp</li>
            </ol>
        </li>
        <li>
            webpack
            <ol>
                <li></li>
            </ol>
        </li>
        <li>
            算法
            <ol>
                <li>二叉树种类 平衡、完全、搜索</li>
                <li>按层级</li>
                <li>
                    按深度
                    <ol>
                        <li>前序</li>
                        <li>后序</li>
                        <li>中序</li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>
            网络
            <ol>
                <li>抓包</li>
                <li>域名分片</li>
                <li>hpack算法</li>
                <li>服务端推送</li>
                <li>对头阻塞</li>
                <li>TCP UDP</li>
                <li>重传</li>
            </ol>
        </li>
        <li>
            web安全
            <ol>
                <li>
                    xss
                    <ol>
                        <li>转义、过滤、消毒</li>
                        <li>csp</li>
                    </ol>
                </li>
                <li>
                    csrf
                    <ol>
                        <li>cookie same-site</li>
                        <li>token</li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>
            babel插件
            <ol>
                <li>AST</li>
            </ol>
        </li>
        <li>
            babel和polyfill
            <ol>
                <li>可选链</li>
            </ol>
        </li>
        <li>
            前端错误监控
            <ol>
                <li>sentry</li>
                <li>采集 onerror、框架错误回调、错误的格式</li>
                <li>上报 sendBean、source-map</li>
                <li>入库、分析</li>
                <li>window.onhandRejection</li>
                <li>展示</li>
            </ol>
        </li>
        <li>
            规范
            <ol>
                <li>
                    husky
                    <ol>
                        <li>.git</li>
                        <li>hooks: pre-commit</li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>
            换肤
            <ol>
                <li>主题色-计算近似色</li>
                <li>定制布局</li>
            </ol>
        </li>
        <li>
            微前端
            <ol>
                <li></li>
            </ol>
        </li>
    </ol>
</section>
<div>
    <section>
        <h4>nodejs</h4>
        <ul>
            <li>
                <div>官网地址:http://nodejs.cn/</div>
                <div>官网地址:https://nodejs.org/en/</div>
            </li>
            <li>创建服务</li>
            <li>express</li>
            <li>koa</li>
            <li>
                <section>
                    <div>目标</div>
                    <ul>
                        <li>中间件</li>
                        <li>mango db</li>
                        <li>上传文件</li>
                        <li>大文件上传</li>
                        <li>post get请求</li>
                        <li class="complete">接参数的方式</li>
                    </ul>
                </section>
            </li>

        </ul>
    </section>
</div>
<script>
    function deepCopy(obj) {
        const res = obj && obj.constructor === Array ? [] : {};
        for (let key in obj) {
            const val = obj[key];
            if (val && typeof val === 'object') {
                res[key] = deepCopy(val);
            } else {
                res[key] = val;
            }
        }
        return res;
    }

    let obj = {
        name: 'zhang',
        arr: [1, 2, 3, 4],
        target: {
            name: 'li'
        },
        say: () => {
            console.log('hello');
        }
    }

    let obj2 = deepCopy(obj);
    obj2.name = 'zhang 1';
    obj2.arr.push(5);
    obj2.target.name = 'li 1';
    obj2.say();
    console.log('obj', obj);
    console.log('obj2', obj2);
</script>
</body>
</html>
